<!--  -->
<template>
  <view>
        <!-- 1.轮播图部分 -->
	    <u-swiper :list="detailList.pics" img-mode="aspectFit" @click="handleImage" height="497" name="pics_big_url" bg-color="#fff"></u-swiper>

        <!-- 2.标题部分 -->
        <view class="content">
            <view class="header">
                <view class="title_top">
                    <view class="price">￥{{detailList.goods_price}}</view>
                    <view class="con">
                        <u-icon class="con-left" color="#707070" size="39" name="zhuanfa"></u-icon>
                        <u-icon class="con-left" color="#707070" size="39" name="star"></u-icon>
                    </view>      
                </view>   
                <view class="title_main">{{detailList.goods_name}}</view>
            </view>
        </view>

        <!-- 3.内容部分 -->
        <view class="main">
            <view class="detail" v-html="detailList.goods_introduce"></view>
            <!-- <u-prase class="detail" :html="detailList.goods_introduce"></u-prase> -->
        </view>
        <!-- 4.底部部分 -->
        <!-- <submitBar class="submit" :num="cart.length"></submitBar> -->
        <!-- 先不封装 -->
        <view class="submit">
            <view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill contact" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">联系客服</view>
			</view>
            <navigator url="/pages/cart/cart" open-type="switchTab">
                <view class="item car">
                    <u-badge class="car-num" :count="count" type="error" :offset="[-3, -6]"></u-badge>
                    <u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
                    <view class="text u-line-1">购物车</view>
                </view>
            </navigator>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @click="handleAdd">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	        </view>
        </view>
        	
  </view>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
export default {

  data () {
    return {
        detailList: [],
    };
  },
  onLoad ({goods_id}){
      goods_id=goods_id||47868
      console.log(20,goods_id);
      this.getDetailList(goods_id)
  },
  methods: {
      ...mapMutations(['cart/cartAdd']),
      async getDetailList(goods_id){
        this.detailList =  await this.$u.http.get("/goods/detail",{goods_id});
      },
      handleImage(index){
          console.log(index);
          const urls= this.detailList.pics.map(item=>item.pics_big_url)
          uni.previewImage({urls,current:index})
      },
      handleAdd(){
          this['cart/cartAdd']({value:this.detailList})
      }
  },
  computed: {
      ...mapState({
          count(state) {
            return state.cart.cartList.reduce((sum,item)=>(sum+=item.num),0)
        }
        })
      },
    
}

</script>
<style lang='scss' scoped>
.navigation {
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		margin-left: 20rpx;
		display: flex;
		font-size: 20rpx;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		margin-left: 35rpx;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #fcaa23;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ea4350;
		}
	}
}
.title_main{
    margin-top: 10rpx;
    color: "#666";
    padding:0 34rpx;
    font-size: 30rpx;
    font-weight: 700;
}
.title_top{
    display: flex;
    justify-content: space-between;
    .price{
        font-size: 36rpx;
        color: $themeColor;
        padding:0 34rpx;  
    }
    .con-left{
        margin-top: 10rpx;
        margin-right: 37rpx;
    }
}
.main{
    position: relative;
    margin-bottom: 50rpx;
    &::before{
        content: "";
        position: absolute;
        top: 0;
        background-color: #f9f9f9;
        width: 100%;
        height:19rpx;
    }
    .detail{
        padding:17rpx;
        margin-top: 19rpx;
    }
}
.submit{
    position: fixed;
    bottom:0;
}
</style>